<template>
  <!-- 岗位管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="inpText">岗位编号:</span>
            <el-input v-model="searchBox.code" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
          <el-col :span="6">
            <span class="inpText">岗位名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="goSearch" v-if="$requestBtnApi.postMan.queryBtn">查询</el-button>
            <el-button type="primary" size="small" @click="resetData">重置</el-button>
            <el-button type="primary" size="small" @click="addData" v-if="$requestBtnApi.postMan.addBtn">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 主题内容 -->
      <div class="table-content">
        <el-table :data="tableData" border tooltip-effect="dark" style="width: 100%">
          <el-table-column align="center" label="#" type="index"></el-table-column>
          <el-table-column prop="tenantName" align="center" label="所属租户"></el-table-column>
          <el-table-column prop="code" align="center" label="岗位编号"></el-table-column>
          <el-table-column prop="name" align="center" label="岗位名称"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <a class="table_a" @click="seeData(scope.row)">
                <i class="el-icon-view"></i>查 看
              </a>
              <a class="table_a table_a_left" @click="editData(scope.row)" v-if="$requestBtnApi.postMan.editBtn">
                <i class="el-icon-edit"></i>编 辑
              </a>
              <a class="table_a table_a_left table_a_del" @click="deleData(scope.row)" v-if="$requestBtnApi.postMan.delBtn">
                <i class="el-icon-delete"></i>删 除
              </a>
            </template>
          </el-table-column>
        </el-table>
        <div  class="pageBox">
        <el-pagination v-show="total>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 420]" :page-size="tableQuery.limit" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination></div>
      </div>
      <!-- 弹框区域 -->
      <!-- 新增 编辑  查看详情 -->
      <el-dialog :title="tit" :visible.sync="dialogSta">
        <el-form label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位编号">
                <el-input v-model="dialogData.code" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位名称">
                <el-input v-model="dialogData.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="租户">
                <el-select v-model="dialogData.tent" placeholder="请选择" size="small" :disabled="tit == '编辑岗位' || tit == '查看'">
                  <el-option v-for="item in dialogData.option" :key="item.value" :label="item.label" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dataPost" size="small" v-if="tit != '查看'">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchBox: {
          name: "",
          sta: "",
          code: "",
        },
        total: 0,
        tableQuery: {
          limit: 5,
          indexNo: 0,
        },
        searchSta: false,
        tableData: [],
        tit: "",
        dialogSta: false,
        dataList: null,
        dialogData: {
          name: "",
          code: "",
          tent: null,
          option: [],
        },
      };
    },
    methods: {
      // 查看
      seeData(val) {
        this.tit = "查看";
        this.dialogData.name = val.name;
        this.dialogData.code = val.code;
        this.dialogData.tent = {
          value: val.tenantCode,
          label: val.tenantName
        };
        this.dialogSta = true;
      },
      // 删除岗位
      deleData(val) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$requestA[this.$requestBtnApi.postMan.delType](
              this.$requestBtnApi.postMan.delUrl + "/" + val.id, {},
              (res) => {
                if (res.code == "200") {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.dialogSta = false;
                  this.getPostDataList();
                }
              }
            );
          })
          .catch(() => {});
      },
      // 弹框  新增  编辑  确定
      dataPost() {
        if (this.tit == "新增岗位") {
          if (!this.dialogData.code) {
            this.$message.error("请输入岗位编号");
            return false;
          }
          if (!this.dialogData.name) {
            this.$message.error("请输入岗位名称");
            return false;
          }
          if (!this.dialogData.tent) {
            this.$message.error("请选择租户");
            return false;
          }
          const data = {
            code: this.dialogData.code,
            name: this.dialogData.name,
            tenantCode: this.dialogData.tent.value,
            tenantName: this.dialogData.tent.label,
          };
          this.$requestA[this.$requestBtnApi.postMan.addType](
            this.$requestBtnApi.postMan.addUrl,
            data,
            (res) => {
              if (res.code == "200") {
                this.$message({
                  type: "success",
                  message: "新增成功!",
                });
                this.dialogSta = false;
                this.getPostDataList();
              }
            }
          );
        } else if (this.tit == "编辑岗位") {
          this.dataList.code = this.dialogData.code;
          this.dataList.name = this.dialogData.name;
          this.$requestA[this.$requestBtnApi.postMan.editType](
            this.$requestBtnApi.postMan.editUrl,
            this.dataList,
            (res) => {
              if (res.code == "200") {
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });
                this.dialogSta = false;
                this.getPostDataList();
              }
            }
          );
        }
      },
      // 新增岗位按钮
      addData() {
        this.dialogData.name = "";
        this.dialogData.code = "";
        this.dialogData.tent = "";
        this.tit = "新增岗位";
        this.dialogSta = true;
      },
      // 编辑岗位按钮
      editData(val) {
        this.dataList = val;
        this.dialogData.name = val.name;
        this.dialogData.code = val.code;
        this.dialogData.tent = {
          value: val.tenantCode,
          label: val.tenantName
        };
        this.tit = "编辑岗位";
        this.dialogSta = true;
      },
      // 搜索按钮
      goSearch() {
        this.searchSta = true;
        this.tableQuery.limit = 5;
        this.tableQuery.indexNo = 0;
        this.getPostDataList();
      },
      // 重置
      resetData() {
        this.searchBox.name = "";
        this.searchBox.code = "";
        this.searchBox.sta = "";
        this.tableQuery.limit = 5;
        this.tableQuery.indexNo = 0;
        this.searchSta = false;
        this.getPostDataList();
      },
      // 获取table数据
      getPostDataList() {
        const data = {
          loginCode: localStorage.getItem("loginCode"),
          tenantCode: localStorage.getItem("TENANT_CODE"),
          size: this.tableQuery.limit,
          page: this.tableQuery.indexNo,
          code: this.searchSta ? this.searchBox.code : "",
          name: this.searchSta ? this.searchBox.name : "",
        };
        this.$requestA[this.$requestBtnApi.postMan.queryType](
          this.$requestBtnApi.postMan.queryUrl,
          data,
          (res) => {
            this.tableData = res.data.content;
            this.total = res.data.totalElements;
          }
        );
      },
      // 获取当前所有租户
      getAllZh() {
        this.dialogData.option = [];
        this.$requestA.get(
          "/IAM/tenant/queryTenant", {
            tenantCode: localStorage.getItem("TENANT_CODE")
          },
          (res) => {
            for (const key in res.data) {
              this.dialogData.option.push({
                value: res.data[key].tenantCode,
                label: res.data[key].tenantName,
              });
            }
          }
        );
      },
      handleSizeChange(val) {
        console.log(val);
        this.tableQuery.limit = val;
        this.tableQuery.indexNo = 0;
        this.getPostDataList();
      },
      handleCurrentChange(val) {
        this.tableQuery.indexNo = val - 0 - 1;
        this.getPostDataList();
      },
    },
    created() {
      this.$route.meta.menuList.map((item) => {
        if (item.eleName == "查询") {
          this.$requestBtnApi.postMan.queryUrl = item.eleUrl;
          this.$requestBtnApi.postMan.queryType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.postMan.queryBtn = true;
        } else if (item.eleName == "新增") {
          this.$requestBtnApi.postMan.addUrl = item.eleUrl;
          this.$requestBtnApi.postMan.addType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.postMan.addBtn = true;
        } else if (item.eleName == "编辑") {
          this.$requestBtnApi.postMan.editUrl = item.eleUrl;
          this.$requestBtnApi.postMan.editType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.postMan.editBtn = true;
        } else if (item.eleName == "删除") {
          this.$requestBtnApi.postMan.delUrl = item.eleUrl;
          this.$requestBtnApi.postMan.delType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.postMan.delBtn = true;
        }
      });
      this.getAllZh();
      this.getPostDataList();
    },
    mounted() {},
  };
</script>

<style scoped>
  @import "../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 5px;
    padding: 40px 40px 60px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .reditBtn {
    margin-left: 20px;
  }
.pageBox {
    display: flex;
    width: 100%;
    justify-content: left;
    margin-top: 10px;
  }
  .btn_box {
    padding-bottom: 10px;
    background: #fff;
    padding-top: 10px;
    padding-right: 25px;
  }
</style>
